<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="采购入库单" name="1"></el-tab-pane>
				<el-tab-pane label="操作记录" name="2"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="tabBoxStep">
					<el-steps :active="Model.stepOption.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.stepOption.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<span class="detailTableImgSmall"></span>
						<p class="text">采购单基础信息</p>
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">
					</div>
					<advancedSearch :option="Model.filterOption" @getChild="getFilterData"></advancedSearch>

				</el-row>
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">商品明细-应入</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table :data="Model.detailData.shouldSaleGoodsInfoVos" border style="width: 100%;max-height:550px">
								<el-table-column type="index" width="50" label="序号" fixed></el-table-column>
								<el-table-column prop="photoUrl" label="商品图片" width="100">
                <template slot-scope="scope">
									<el-tooltip placement="top" effect="light">
											<div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
											<img class="mainTableImg" :src="scope.row.photoUrl" alt="">
										</el-tooltip>
									</template>
                </el-table-column>
								<el-table-column prop="orderNumber" label="采购订单号" width="120"></el-table-column>
								<el-table-column prop="projectCategory" label="项目类别" width="150"></el-table-column>
								<el-table-column prop="goods" label="商品号" width="120"></el-table-column>
								<el-table-column prop="batchNo" label="条码" width="200"></el-table-column>
								<el-table-column prop="styleNumber" label="款式" width="120"></el-table-column>
								<el-table-column prop="productCategoryCategory" label="品类" width="120"></el-table-column>
								<el-table-column prop="description" width="150">
									<template slot="header" slot-scope="scope">
										<el-tooltip content="外观/颜色/净度/切工/3EX-非3EX/钻重" placement="top">
											<span class="iconQuestionmark">描述</span>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="netGoldWeight" label="净金重" width="120"></el-table-column>
								<el-table-column prop="netWeight" label="产品总重" width="120"></el-table-column>
								<el-table-column prop="mainQuantity" label="数量" width="120"></el-table-column>
							</el-table>
						</div>
					</el-row>
					<el-row class="detailTable" v-show="Model.status=='已入库'">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">商品明细-实入</p>
						</div>
						<div class="detailTableDetail">
              <el-table :data="Model.detailData.actualSaleGoodsInfoVos" border style="width: 100%;"
							 @selection-change="onTableSelectionChange">
								<el-table-column type="selection" width="50"  fixed></el-table-column>
								<el-table-column type="index" width="50" label="序号" fixed></el-table-column>
								<el-table-column prop="photoUrl" label="商品图片" width="100">
                <template slot-scope="scope">
									<el-tooltip placement="top" effect="light">
											<div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
											<img class="mainTableImg" :src="scope.row.photoUrl" alt="">
										</el-tooltip>
									</template>
                </el-table-column>
								<el-table-column prop="orderNumber" label="采购订单号" width="120"></el-table-column>
								<el-table-column prop="projectCategory" label="项目类别" width="150"></el-table-column>
								<el-table-column prop="goods" label="商品号" width="120"></el-table-column>
								<el-table-column prop="batchNo" label="条码" width="120">
                  <template slot-scope="scope">
										<el-button type="text" @click="toBarcodeDetail(scope.row)">{{scope.row.batchNo}}</el-button>
									</template></el-table-column>
								<el-table-column prop="styleNumber" label="款式" width="120"></el-table-column>
								<el-table-column prop="productCategoryCategory" label="品类" width="120"></el-table-column>
								<el-table-column prop="description" width="150">
									<template slot="header" slot-scope="scope">
										<el-tooltip content="外观/颜色/净度/切工/3EX-非3EX/钻重" placement="top">
											<span class="iconQuestionmark">描述</span>
										</el-tooltip>
									</template>
								</el-table-column>
								<el-table-column prop="netGoldWeight" label="净金重" width="120"></el-table-column>
								<el-table-column prop="netWeight" label="产品总重" width="120"></el-table-column>
								<el-table-column prop="mainQuantity" label="数量" width="120"></el-table-column>
							</el-table>
						</div>
						
					</el-row>

				</div>
				<div v-show="Model.activeTab==2">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<span class="detailTableImgSmall"></span>
							<p class="text">订单操作日志</p>
							<img class="detailTableImgNormal" :src="Model.tab2TableDetail1.src" alt="" @click="toggleTableDetail('tab2TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab2TableDetail1.flag">
							<el-table :data="Model.saleLogList" border show-summary style="width: 100%;max-height:550px" @selection-change="onTableSelectionChange">
								<el-table-column prop="createTime" label="时间" width="200"></el-table-column>
								<el-table-column prop="type" label="操作类型" width="120"></el-table-column>
								<el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
								<el-table-column prop="record" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
